<template>
  <div class="home">
    <div class="home_title">
      <div class="home_title_left">
        <p>{{ mydate_day }}</p>
        <p>{{ mydate_monthText }}</p>
      </div>
      <div class="home_title_mlddle">{{ papersTitle }}</div>
      <div class="home_title_right" @click="gotoMyselFn">
        <img src="../assets/logo.png" />
      </div>
    </div>

    <!-- 轮播渲染开始 -->
    <header class="home_header_banner">
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
        <van-swipe-item
          class="myselfbox"
          v-for="item in myNewstop"
          :key="item.id"
          @click="gotoNewspaperFn(item.id)"
        >
          <div class="myswipe_imgbox">
            <img class="my_imgs" :src="item.image" />
          </div>
          <div class="myswipe_pbox">
            <p>
              {{ item.title }}
            </p>
            <p>{{ item.hint }}</p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </header>
    <!-- 轮播渲染结束 -->

    <!-- 内容渲染开始 -->
    <a
      class="home_main"
      v-for="item in myNewsbottom"
      :key="item.id"
      @click="gotoNewspaperFn(item.id)"
    >
      <div class="home_main_box">
        <div class="home_main_box_left">
          <div class="home_main_box_left_pbox">
            <p>
              {{ item.title }}
            </p>
          </div>
          <div class="home_main_box_left_pbox">
            <p>{{ item.hint }}</p>
          </div>
        </div>
        <div class="home_main_box_right">
          <img :src="item.images" />
        </div>
      </div>
    </a>
    <!-- 内容渲染结束 -->
    <!-- ================================================= -->
    <!-- ================================================= -->
    <div class="history">
      <div class="history_boderTop">
        <div class="history_boderTop_p">
          {{ mydate_month * 1 }} 月{{ mydate_day - 1 }}日
        </div>
        <div class="history_boderTop_hr">
          <hr style="font-weight: 700" />
        </div>
      </div>
    </div>
    <div class="rendering">
      <a
        class="home_main"
        v-for="item in myNewsbottomBefore"
        :key="item.id"
        @click="gotoNewspaperFn(item.id)"
      >
        <div class="home_main_box">
          <div class="home_main_box_left">
            <div class="home_main_box_left_pbox">
              <p>
                {{ item.title }}
              </p>
            </div>
            <div class="home_main_box_left_pbox">
              <p>{{ item.hint }}</p>
            </div>
          </div>
          <div class="home_main_box_right">
            <img :src="item.images" />
          </div>
        </div>
      </a>
    </div>
    <!-- ================================================= -->
    <!-- ================================================= -->
    <!-- ================================================= -->
    <div v-for="offset in 4" :key="offset">
      <DateComponent
        :mydate_month="mydate_month * 1"
        :mydate_day="mydate_day * 1 - offset"
      />
      <MystoryComponent :mydate="mydate * 1 - offset" />
    </div>
    <!-- ================================================= -->
    <!-- ================================================= -->
    <!-- ================================================= -->
    <!-- ================================================= -->
  </div>
</template>

<style lang="less">
.home_title {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 5px;
  font-size: 16px;

  .home_title_left {
    width: 70px;
    height: 100%;
    text-align: center;
    border-right: 1px solid gray;

    p {
      margin: 0 !important;

      &:nth-child(1) {
        font-size: 20px;
        font-weight: 700;
      }
    }
  }
  .home_title_mlddle {
    flex: 1;
    margin-left: 20px;
    font-size: 25px;
    font-weight: 700;
  }
  .home_title_right {
    img {
      width: 45px;
    }
  }
}
.my-swipe {
  width: 100%;
  height: 375px;
}
.van-swipe__indicators {
  left: 320px;
}
.home_header_banner {
  .myselfbox {
    position: relative;

    .myswipe_pbox {
      position: absolute;
      bottom: 0;
      left: 0;
      p {
        line-height: 36px;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 限制显示两行 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* 第二行开始出现省略号 */
        font-size: 18px;
        font-weight: 700;
        color: white;
        margin-left: 20px;
        text-align: left;

        &:nth-child(2) {
          color: #a5b8bd;
          font-weight: 400;
          margin-bottom: 20px;
        }
      }
    }
  }
}
.my_imgs {
  width: 375px;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.home_main {
  width: 100%;
  height: 90px;
  display: flex;
  margin: 15px 0;
  // background: aqua;
  justify-content: center;
  align-items: center;

  .home_main_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;

    .home_main_box_left {
      flex: 1;
      font-size: 18px;
      font-weight: 700;

      .home_main_box_left_pbox {
        &:nth-child(1) {
          p {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis; /* 第二行开始出现省略号 */
          }
        }

        &:nth-child(2) {
          margin-top: 15px;

          p {
            font-size: 12px;
          }
        }
      }
    }

    .home_main_box_right {
      img {
        width: 75px;
        padding: 0 0 0 15px;
        vertical-align: bottom;
      }
    }
  }
}

.history_boderTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 15px;

  .history_boderTop_hr {
    flex: 1;
    margin-left: 15px;
  }
}
</style>

<script>
import { latestDailyNewspaper, storiesBeforeDate } from "@/api/index";
import DateComponent from "@/components/DateComponent.vue";
import MystoryComponent from "@/components/MystoryComponent.vue";

export default {
  name: "HomeView",
  components: {
    DateComponent,
    MystoryComponent,
  },
  data() {
    return {
      papersTitle: "",
      mydate: "",
      mydate_month: [],
      mydate_monthText: [],
      mydate_day: [],
      myNewstop: [],
      myNewsbottom: [],
      myNewsbottomBefore: [],
      dynamicOffset: 0,
    };
  },
  methods: {
    // 处理接口数据（最新日报接口）
    async latestDailyNewspaperFn() {
      return new Promise((resolve, reject) => {
        latestDailyNewspaper()
          .then((content) => {
            // console.log("最新日报", content);
            let { date, stories, top_stories } = content;
            this.mydate = date * 1;
            this.mydate_day = date.slice(-2) * 1;
            this.mydate_month = date.slice(4, 6);
            let arrTop = top_stories.map((item) => {
              let obj = {};
              obj.hint = item.hint;
              obj.id = item.id;
              obj.image = item.image;
              obj.title = item.title;
              obj.url = item.url;
              return obj;
            });
            this.myNewstop = arrTop;
            this.mydate_monthText = this.convertMonthToText(this.mydate_month);
            // ====> 顶部数据处理结束

            // 内容数据处理
            let arrMain = stories.map((item) => {
              let obj = {};
              obj.hint = item.hint;
              obj.id = item.id;
              obj.images = item.images[0];
              obj.title = item.title;
              obj.url = item.url;
              return obj;
            });
            this.myNewsbottom = arrMain;
            // console.log(this.mydate);

            // 将 this.mydate 数据传递回去
            resolve(this.mydate);
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    convertMonthToText(month) {
      switch (month) {
        case "01":
          return "一月";
        case "02":
          return "二月";
        case "03":
          return "三月";
        case "04":
          return "四月";
        case "05":
          return "五月";
        case "06":
          return "六月";
        case "07":
          return "七月";
        case "08":
          return "八月";
        case "09":
          return "九月";
        case "10":
          return "十月";
        case "11":
          return "十一月";
        case "12":
          return "十二月";
        default:
          return "无效的月份";
      }
    },
    // 日期减一传递接口参数
    async storiesBeforeDateFn(mydate) {
      try {
        const content = await storiesBeforeDate({}, mydate);
        // console.log("历史新闻内容:", content);
        let { stories } = content;
        // 内容数据处理
        let arrMain = stories.map((item) => {
          let obj = {};
          obj.hint = item.hint;
          obj.id = item.id;
          obj.images = item.images[0];
          obj.title = item.title;
          obj.url = item.url;
          return obj;
        });
        this.myNewsbottomBefore = arrMain;
      } catch (error) {
        console.error("获取历史新闻失败:", error);
      }
    },
    gotoMyselFn() {
      this.$router.push({ path: "/myself" }).catch(() => {});
    },
    gotoNewspaperFn(id) {
      let arrstr = localStorage.getItem("USERID");
      if (arrstr) {
        this.$router
          .push({ path: "/newspaper", query: { id: id } })
          .catch(() => {});
        console.log("55555 ========>", id);
      } else {
        alert("您还没登录喔，请登录之后再尝试浏览喔~~~");
      }
    },
    timeUpdate() {
      // 获取当前时间
      var now = new Date();
      var hour = now.getHours();
      // var minute = now.getMinutes();

      // 判断时间段并渲染不同的问候信息
      // if ((hour === 18 && minute >= 0) || (hour > 18 && hour < 22)) {
      //   this.papersTitle = "晚上好";
      // } else if (
      //   (hour === 22 && minute >= 0) ||
      //   (hour === 23 && minute <= 30)
      // ) {
      //   this.papersTitle = "早点休息";
      // } else {
      //   this.papersTitle = "星辰日报";
      // }


      if (hour >= 6 && hour < 10) {
        this.papersTitle = "早上好！";
      } else if (hour >= 18 && hour < 22) {
        this.papersTitle = "晚上好！";
      } else if (hour >= 22 || (hour >= 0 && hour < 6)) {
        this.papersTitle = "早点休息~~~";
      } else {
        this.papersTitle = "星辰日报";
      }
    },
  },
  created() {
    this.latestDailyNewspaperFn();
  },
  mounted() {
    this.timeUpdate();
  },
  watch: {
    mydate(v) {
      this.storiesBeforeDateFn(v);
    },
  },
};
</script>
